<template>
	<view class="search_result">
		<u-navbar
		:is-back="false"
		title=" "
		:border-bottom="false"
		:background="background">
			<view class="searchTags">
				<u-tabs-swiper 
				ref="tabs" 
				:list="taglist" 
				inactive-color="#FFFFFF"
				bg-color="transparent"
				active-color="#ffffff"
				:bold="false"
				:current="current" 
				@change="tabsChange"
				:is-scroll="false"></u-tabs-swiper>
			</view>
		</u-navbar>
		<u-search 
		placeholder="搜索开发者" 
		:show-action="false"
		@search="search"
		v-model="keyword"></u-search>
		<view class="filter">
			<view class="item" @tap="toPage('/pages/Search/area')">全国</view>
			<view class="item" @tap="toPage('/pages/Search/filter')">筛选</view>
		</view>
		<view class="content">
			<swiper class="swiper" :current="swiperCurrent" @change="changeSwiper">
				<swiper-item class="swiper-item">
					<scroll-view class="scroll" scroll-y @scrolltolower="onreachBottom">
						
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view class="scroll" scroll-y @scrolltolower="onreachBottom">
						<block v-for="(item,index) in 10" :key="index">
							<JobItem></JobItem>
						</block>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view class="scroll" scroll-y @scrolltolower="onreachBottom">
						<block v-for="(item,index) in 10" :key="index">
							<UserCard></UserCard>
						</block>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<Nav></Nav>
	</view>
</template>

<script>
	import Nav from "@/components/Nav.vue"
	import UserCard from "@/components/UserCard.vue"
	import JobItem from "@/components/JobItem.vue"
	export default {
		components:{
			Nav,
			UserCard,
			JobItem
		},
		data() {
			return {
				background: {
					backgroundColor:"#4A90E2"
				},
				keyword:'',
				taglist: [{
					name: '附近'
				}, {
					name: '最近'
				}, {
					name: '全部'
				}],
				current: 2,
				swiperCurrent: 2,
			}
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		methods: {
			search(){
				console.log('搜索')
				
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			changeSwiper(e) {
				let current = e.detail.current;
				this.swiperCurrent = current;
				this.current = current;
			},
			//下拉刷新
			onreachBottom() {
				
			},
			// 跳转
			toPage(url){
				uni.navigateTo({
				    url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search_result{
		min-height: 100vh;
		background-color: #f9f9f9;
		.searchTags{
			padding:0 248rpx;
		}
		padding:  0 30rpx;
		/deep/.u-content{
			height: auto!important;
			padding: 30rpx 0;
			background-color: transparent!important;
			border-bottom: 1px solid #E6E6E6;
			border-radius: 0!important;
			.u-input{
				background-color: transparent!important;
				font-size: 28rpx;
				font-weight: 400;
				color: #AEAEAE;
				line-height: 40rpx;
				margin-left: 30rpx;
			}
		}
		.filter{
			display: flex;
			justify-content: flex-end;
			height: 106rpx;
			padding: 30rpx 0;
			.item{
				height: 46rpx;
				line-height: 46rpx;
				padding:0 42rpx 0 20rpx;
				position: relative;
				font-size: 24rpx;
				font-weight: 400;
				color: #888888;
				background: #FFFFFF;
				border-radius: 23rpx;
				margin-left: 35rpx;
				&::after{
					content: '';
					width: 10rpx;
					height: 10rpx;
					border: 1rpx solid #3B3B3B;
					border-left-color: transparent;
					border-top-color: transparent;
					position: absolute;
					right: 20rpx;
					top: calc(50% - 10rpx);
					transform: rotate(45deg);
				}
			}
		}
		.content{
			height:calc(100vh - 140px - 200rpx);
			.swiper,.scroll{
				height:calc(100vh - 140px - 200rpx);
			}
			
		}
	}
	
</style>
